<template>
  <div>
    <home v-if="currentPage == 'home'"></home>
    <mine v-if="currentPage == 'mine'"></mine>
    <router-view></router-view>
    <layer @reactivePage="observePage" />
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import Layer from "@/components/layer/Layer.vue";
import Home from "../home/Home.vue";
import Mine from "../mine/Mine.vue";

export default defineComponent({
  components: {
    Layer,
    Home,
    Mine,
  },
  setup() {
    const currentPage = ref("home");

    // 监听页面活动
    const observePage = (page) => {
      currentPage.value = page;
    };

    return {
      observePage,
      currentPage,
    };
  },
});
</script>
